<template>
    <div class="mainContent">
        <el-row :gutter="20">
            <el-col :span="8">
                <!-- grid-content -->
                <el-card class="grid-content" shadow="always">
                    <span>用户总数量:<span v-loading="loading">{{ totalUser }}</span></span>
                    <el-button size='small' type="primary" @click="getTotalUser">刷新</el-button>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="grid-content" shadow="always">
                    <span>商品总数量:100</span>
                    <el-button size='small' type="primary">刷新</el-button>
                </el-card>
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="24">
                <EchartsItem :option="option"></EchartsItem>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { StatisticUserAPI } from "@/api/statistic"
import EchartsItem from "@/components/EchartsItem.vue"
import { getEchartsKDataAPI } from "@/api/echarts";

// 写死的
var option = {
    title: {  //echarts显示的标题
        // text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        orient: "vertical",
        right: "10px",
        top: "center",
        data: [],
    },
    grid: {
        left: "5%",
        right: "10%",
    },
    xAxis: {    // x轴   => data显示的字段信息
        type: "category",
        data: [],
    },
    yAxis: {
        type: "value",  // 显示数据
    },
    series: [],

};


export default {
    name: "MainView",
    data() {

        return {
            totalUser: 0,
            loading: true,
            option: {},
        }
    },
    methods: {
        async getTotalUser() {
            this.loading = true;
            var res = await StatisticUserAPI();
            // console.log(123123,res);
            this.totalUser = res.data;
            this.loading = false;
        },
        async getEchartsKData() {
            try {
                var res = await getEchartsKDataAPI();
                console.log(res);
                var data = res.data;
                var { x, val } = data;
                console.log(x, val);

                let legendList = ['销量', "价格", "库存", "评论"];
                option.legend.data = legendList;
                option.xAxis.data = x;

                var list = legendList.map((v, i) => ({ name: v, type: "bar", data: val[i] }));
                option.series = list;


                this.option = option;



            } catch (err) {
                this.$message.error(err.message);
            }
        }
    },
    components: {
        EchartsItem
    },
    mounted() {
        this.getTotalUser();
        this.getTotalUser();
        this.getEchartsKData();
    }
}
</script>

<style lang="scss" scoped>
::v-deep .grid-content .el-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>